import {
  defineConfig,
  presetAttributify,
  presetIcons,
  presetTypography,
  presetUno,
  presetWebFonts,
  transformerDirectives,
  transformerVariantGroup,
} from 'unocss'

export default defineConfig({
  presets: [
    presetUno(),
    presetAttributify(),
    presetIcons({
      scale: 1.2,
      warn: true,
      collections: {
        carbon: () => import('@iconify-json/carbon/icons.json').then(i => i.default),
        mdi: () => import('@iconify-json/mdi/icons.json').then(i => i.default),
      },
    }),
    presetTypography(),
    presetWebFonts({
      fonts: {
        sans: 'Inter:400,500,600,700',
        mono: 'DM Mono',
      },
    }),
  ],
  transformers: [
    transformerDirectives(),
    transformerVariantGroup(),
  ],
  theme: {
    colors: {
      primary: '#646cff',
      'primary-hover': '#535bf2',
    },
  },
  shortcuts: {
    'btn': 'px-4 py-2 rounded-lg font-medium cursor-pointer transition-all duration-200 border border-transparent',
    'btn-primary': 'btn bg-primary text-white hover:bg-primary-hover',
    'link': 'text-primary hover:text-primary-hover transition-colors',
  },
  rules: [
    [/^animate-fade-in$/, () => ({
      animation: 'fade-in 0.3s ease-out',
    })],
  ],
  preflights: [
    {
      getCSS: () => `
        @keyframes fade-in {
          from {
            opacity: 0;
            transform: translateY(-10px);
          }
          to {
            opacity: 1;
            transform: translateY(0);
          }
        }
      `,
    },
  ],
})

